<template>
    <div class="infoList-box">
      <Searchmodule class="search-box" :placeholder="placeholder"  @seacherKey="getPageTransaction"></Searchmodule>
      <ul v-loading="loading" >
        <li v-for="item in materailList"  @click="getMaterialName(item)">
          {{item.materialName}}
        </li>
      </ul>
    </div>
</template>

<script>
import { findByCanCheckMaterail } from '@/api/inventoryManagement.js'
let $this = null
export default {
  name: 'materail-basic-list',
  components: {},
  props: {},
  data () {
    return {
      placeholder: '请输入物料编号',
      loading: false,
      materailList: []
    }
  },
  computed: {},
  watch: {},
  created () {
    $this = this
  },
  mounted () {
  },
  methods: {
    getPageTransaction (words) {
      if (!words) {
        return
      }
      if (parseFloat(words).toString() === 'NaN') {
        return $this.$message.error('请输入物料编码')
      }
      $this.loading = true
      findByCanCheckMaterail({ materailNumber: words }).then(res => {
        $this.loading = false
        $this.materailList = res.data.data
      }).catch(err => {
        $this.loading = false
        return $this.$message.error(err.message)
      })
    },
    getMaterialName (item) {
      $this.$emit('getMaterialName', item)
    }
  }
}
</script>

<style scoped lang="scss">

  .infoList-box{
    .search-box{
      width: 90%;
      margin: 0 auto;
      position: absolute;
      top: 50px;
    }
    ul{
      margin-top: 40px;
      li{
        padding: 10px 0;
      }
    }

  }

</style>
